@import '../kit/styleKitIndex.scss';

//padding的变量
$var-padding-extend-func: 5px 10px 15px 20px 25px 30px;
$var-margin-extend-func: 5px 10px 15px 20px 25px 30px;
$var-height-lineHeight-func: 20px 25px 30px 35px;
$var-border-radius-func: 4px 8px 12px 22px 36px;
$var-height-func: 22px 26px 28px 32px 36px;
$var-width-func: 22px 25px 28px 32px 36px;
$var-opacity-func: 0 25 40 60 80 90;
$var-position-extend-func: 5px 10px 16px;

//配置padding的函数
@mixin padding-extend-func($num) {
    .zlst-padding-top-#{$num} {
        padding-top: #{$num};
    }
    .zlst-padding-right-#{$num} {
        padding-right: #{$num};
    }
    .zlst-padding-bottom-#{$num} {
        padding-bottom: #{$num};
    }
    .padding-left-#{$num} {
        padding-left: #{$num};
    }
    .zlst-padding-#{$num} {
        padding: #{$num};
    }
}
@each $var in $var-padding-extend-func {
    @include padding-extend-func($var);
}

// 配置margin的函数
@mixin margin-extend-func($num) {
    .zlst-margin-top-#{$num} {
        margin-top: #{$num};
    }
    .zlst-margin-right-#{$num} {
        margin-right: #{$num};
    }
    .zlst-margin-bottom-#{$num} {
        margin-bottom: #{$num};
    }
    .zlst-margin-left-#{$num} {
        margin-left: #{$num};
    }
    .zlst-margin-#{$num} {
        margin: #{$num};
    }
}
@each $var in $var-margin-extend-func {
    @include margin-extend-func($var);
}

//配置高度和行高 的函数
@mixin height-lineHeight-func($num){
    .zlst-line-height-#{$num}{
        height:  #{$num};
        line-height:  #{$num};
    }
}
@each $var in $var-height-lineHeight-func {
    @include height-lineHeight-func($var);
}

// 配置圆角的函数
@mixin border-radius-func($num){
    .zlst-border-radius-#{$num}{
        border-radius: #{$num};
    }
}
@each $var in $var-border-radius-func {
    @include border-radius-func($var);
}

// 设置高度的函数
@mixin height-func($num){
    .zlst-height-#{$num}{
        height: #{$num};
    }
}
@each $var in $var-height-func {
    @include height-func($var);
}

// 设置高度的函数
@mixin width-func($num){
    .zlst-width-#{$num}{
        width: #{$num};
    }
}
@each $var in $var-width-func {
    @include width-func($var);
}

// 设置透明度的函数
@mixin opacity-func($num){
    .zlst-opacity-#{$num}{
        opacity: #{$num/100};
    }
}
@each $var in $var-opacity-func {
    @include opacity-func($var);
}

// 设置定位的函数
@mixin position-extend-func($num) {
    .zlst-position-top-#{$num} {
        top: #{$num};
    }
    .zlst-position-right-#{$num} {
        right: #{$num};
    }
    .zlst-position-bottom-#{$num} {
        bottom: #{$num};
    }
    .zlst-position-left-#{$num} {
        left: #{$num};
    }
}
@each $var in $var-position-extend-func {
    @include position-extend-func($var);
}

// 一行显示省略号
.one-line-ellipsis{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}

// 图片自适应-响应式
.img_responsive {display: block;max-width: 100%;height: auto;}

// position 定位类型
.zlst-relative{position: relative;}
.zlst-absolute{position: absolute;}
.zlst-fixed{position: fixed;}

// 鼠标显示手指
.zlst-pointer{cursor:pointer}

//浮动
.zlst-float-left{float:left;}
.zlst-float-right{float:right;}

.zlst-overflow-hidden{overflow: hidden;}
.zlst-visibility-hidden{visibility:hidden;}
.zlst-visibility-visible {visibility:visible;}

// display 显示类型
.zlst-display-none-important{display: none !important;}
.zlst-display-none{display: none;}
.zlst-display-block-important{display: block !important;}
.zlst-display-block{display: block;}
.zlst-display-inline-block-important{display: inline-block !important;}
.zlst-display-inline-block{display: inline-block;}
.zlst-display-inline-important{display: inline !important;}
.zlst-display-inline{display: inline;}

//demo作者
.author-demo{
    background: #000;
    position: fixed;
    right: 0;
    padding: 12px;
    color: #fff;
    z-index: 9999;
}

.zlst-layout-gap1 {
    @include gap1();
}

//右侧主屏幕最小宽度
.zlst-min-width{
    width:$window-min-width - $frame-nav-width;
}
